<template>
  <section class="component work-message">
    <span
      class="message-icon"
      @click="updateMessageBoxVisible(true)"
      v-if="!isLegalMessage"
    >
      <el-badge :value="unReadCount" v-if="unReadCount" class="icon">
        <a><i class="el-icon-message-solid icon-style"></i></a>
      </el-badge>
      <a v-else><i class="el-icon-message-solid icon-style"></i></a>
    </span>

    <el-dialog
      :visible.sync="messageBoxVisible"
      title="消息列表"
      v-if="messageBoxVisible"
    >
      <message-box
        :visible.sync="messageBoxVisible"
        @view-detail="onViewDetail"
        :isLegalMessage="isLegalMessage"
      ></message-box>
    </el-dialog>

    <el-dialog title="消息详情" :visible.sync="dialog.messageDetail">
      <message-detail :message="msgDetail"></message-detail>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { State, Mutation, Action, namespace } from "vuex-class";
import MessageBox from "~/components/workspace/message/message-box.vue";
import MessageDetail from "~/components/workspace/message/message-detail.vue";
import { Dependencies } from "~/core/decorator";
import { ReminderMessageService } from "~/services/common-service/reminder-message.service";
import { ReminderService, ReminderMessageType } from "~/utils/reminder.service";
const workspaceModule = namespace("workspace");

@Component({
  components: {
    MessageBox,
    MessageDetail
  }
})
export default class WorkMessage extends Vue {
  @Dependencies(ReminderMessageService)
  private reminderMessageService: ReminderMessageService;
  @workspaceModule.State private unReadCount;
  @workspaceModule.State("messageBoxVisible") private mMessageBoxVisible;
  @workspaceModule.Mutation private updateMessageBoxVisible;
  @workspaceModule.Action private updateUnReadCount;

  @Prop() private isLegalMessage;

  // private unReadCount = 0;
  private msgDetail = {};

  private dialog = {
    messageBox: false,
    messageDetail: false
  };

  get messageBoxVisible() {
    return this.mMessageBoxVisible;
  }

  set messageBoxVisible(value) {
    this.updateMessageBoxVisible(value);
  }

  private mounted() {
    // 更新未读消息
    this.updateUnReadCount();
    // 收到消息通知时更新未读消息
    // 收到消息通知时更新未读消息
    ReminderService.getInstance()
      .addListener(ReminderMessageType.Reminder)
      .subscribe(this.updateUnReadCount);
  }

  private showNotify(data) {
    const option: any = {
      type: data.type,
      title: data.title,
      message: data.content,
      position: "bottom-right",
      iconClass: "el-icon-bell",
      customClass: "remind_notify",
      duration: data.duration || 6666
    };
    if (data.messageMode === "POPUP") {
      option.onClick = () => this.onViewDetail(data);
    }

    this.$notify(option);
  }

  private onViewDetail(data) {
    this.msgDetail = data;
    this.dialog.messageDetail = true;
    // this.getUnReadCount()
  }
}
</script>

<style lang="less" scoped>
.component.work-message {
  padding-top: 8px;
  .message-icon {
    padding-right: 10px;
  }
}
.icon-style {
  font-size: 25px;
  color: #0064bf;
}
</style>
